<template>
  <div class="library">
    <div class="status-panel" 
      @mouseenter="stopScroll" 
      @mouseleave="startScroll">
      <div class="status-grid" 
        ref="statusGrid"
        :class="{ 'manual-scroll': !isScrolling }"
        :style="{ transform: `translateY(${scrollTop}px)`, transition: 'transform 0.5s' }">
        <div 
          v-for="item in menuList" 
          :key="item.value"
          :class="['status-item', { active: menuActive === item.value }]"
          @click="handleItemClick(item)">
          <div class="item-source">{{ item.source }}</div>

          <div class="item-list">
            <div 
              v-for="(child, childIndex) in item.children" 
              class="item-listDetail"
              :key="childIndex">
              <div class="item-header">{{ child.label }}</div>

              <div class="item-content">
                <div class="status-row">
                  <span>总数</span>
                  <span class="value">{{ getStatusCount(child.value, '总数') }}</span>
                </div>
                <div class="status-row">
                  <span>正常</span>
                  <span class="value normal">{{ getStatusCount(child.value, '正常') }}</span>
                </div>
                <div class="status-row">
                  <span>数据延迟</span>
                  <span class="value delay">{{ getStatusCount(child.value, '数据延迟') }}</span>
                </div>
                <div class="status-row">
                  <span>数据缺失</span>
                  <span class="value missing">{{ getStatusCount(child.value, '数据缺失') }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="wrapper">
      <router-view />
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  name: 'Library',
  computed: {
    menuActive ({ $route }) {
      return $route.meta.menuActive
    },
    ...mapState({
      total: state => state.library.total,
    })
  },
  created () {
    this.menuList = []
    this.initMenu()
    this.initTotal()
  },
  data () {
    return {
      menuList: [],
      scrollTop: 0,
      scrollTimer: null,
      itemHeight: 0,
      isScrolling: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initScroll();
    });
  },
  beforeDestroy() {
    this.clearScrollTimer();
  },
  methods: {
    initMenu () {
      this.menuList = [
        { 
          source: '省水利厅',
          children: [
            { label: '水库', value: 'realtimeSk' },
            { label: '内涝点', value: 'realtimeNld' },
            { label: '雨量站', value: 'realtimeYlz' },
            { label: '河道站', value: 'realtimeHdz' },
            { label: '潮位站', value: 'realtimeHdz' }
          ]
        },
        // label: '水闸水情', value: 'realtimeSz' },
        // { label: '水闸水情', value: 'realtimeSz' },
        // { label: '水闸工情', value: 'realtimeSzgq' },
        // { label: '泵站水情', value: 'realtimeBz' },
        // { label: '泵站工情', value: 'realtimeBzgq' },
        // { label: '水库', value: 'realtimeSk' },
        // { label: '内涝点', value: 'realtimeNld' },
        // { label: '河道站', value: 'realtimeHdz' },
        // { label: '雨量站', value: 'realtimeYlz' },
        // { label: '潮位站', value: 'realtimeCwz' },
        // { label: '水质断面', value: 'realtimeSzdm' },
        // // { label: '管网流量', value: 'gwll' },
        // { label: '水质自动站-小时', value: 'realtimeSzzdz' },
        // { label: '水质自动站-日', value: 'realtimeSzzdzDay' },
        // { label: '污水厂进口水质', value: 'realtimeWscjs' },
        // { label: '污水厂出口水质', value: 'realtimeWsccs' },
        // { label: '农污水质', value: 'realtimeNwsz' },
        // { label: '农污电流', value: 'realtimeNwdl' },
        // { label: '管网液位', value: 'realtimeGwyw' },
        // { label: '智能拍门', value: 'realtimeZnpm' },
        // { label: '排水泵站', value: 'realtimePsbz' },
        // { label: '佛山镇街雷达图', value: 'realtimeFszjldt' },
        // { label: 'X波段雷达图', value: 'realtimeXbdldt' },
      ]
    },
    initTotal () {
      this.menuList.map(item => this.GET_TOTAL(item.value))
    },
    handleItemClick (item) {
      if (this.menuActive === item.value) {
        return
      }
      
      this.$router.push(`/home/library/${item.value}`)
    },
    getStatusCount (value, type) {
      const data = this.total[value] || {}

      return data[type] || 0
    },
    ...mapActions({
      'GET_TOTAL': 'library/GET_TOTAL'
    }),
    initScroll() {
      const items = this.$refs.statusGrid?.children;
      
      if (items && items.length > 0) {
        this.itemHeight = items[0].offsetHeight + 16;
        this.startScroll();
      } else {
        setTimeout(() => {
          this.initScroll();
        }, 500);
      }
    },
    startScroll() {
      this.clearScrollTimer();
      if (this.scrollTimer) return;
      
      this.isScrolling = true;
      const panel = this.$refs.statusGrid.parentElement;
      panel.scrollTop = 0;
      
      this.scrollTimer = setInterval(() => {
        if (!this.isScrolling) return;
        
        if (!this.$refs.statusGrid) return;
        
        const gridHeight = this.$refs.statusGrid.offsetHeight;
        const containerHeight = this.$refs.statusGrid.parentElement.offsetHeight;
        const maxScroll = gridHeight - containerHeight;
        
        if (gridHeight <= containerHeight) {
          return;
        }

        if (this.scrollTop <= -maxScroll) {
          this.$refs.statusGrid.style.transition = 'none';
          this.scrollTop = 0;
          this.$refs.statusGrid.offsetHeight;
          this.$refs.statusGrid.style.transition = 'transform 0.5s';
        } else {
          this.scrollTop -= this.itemHeight * 2;
          if (this.scrollTop < -maxScroll) {
            this.scrollTop = -maxScroll;
          }
        }
      }, 10000);
    },
    stopScroll() {
      this.isScrolling = false;
      this.scrollTop = 0;
    },
    clearScrollTimer() {
      if (this.scrollTimer) {
        clearInterval(this.scrollTimer);
        this.scrollTimer = null;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'common/scss/color';

.library {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;

  > .status-panel {
    flex: 0 0 360px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    border-right: 1px solid #dcdee2;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    background: #fff;

    > .status-grid {
      padding: 16px;
      
      &.manual-scroll {
        transform: none !important;
        transition: none !important;
      }

      .status-item {
        .item-source {
          font-size: 16px;
          color: #1890ff;
          font-weight: bold;
          margin-bottom: 12px;
        }
        .item-list {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
          will-change: transform;
          .item-listDetail {
            background: #f5f7fa;
            border-radius: 4px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              background: #e6f7ff;
            }

            &.active {
              background: #e6f7ff;
              border: 1px solid #1890ff;
            }
            .item-header {
              font-size: 16px;
              margin-bottom: 12px;
              color: #333;
              font-weight: bold;
            }
            .item-content {
              .status-row {
                display: flex;
                justify-content: space-between;
                margin-bottom: 6px;
                font-size: 14px;
                color: #666;
    
                .value {
                  font-weight: bold;
                  color: #333;
    
                  &.normal {
                    color: #52c41a;
                  }
    
                  &.missing {
                    color: #ff4d4f;
                  }
    
                  &.delay {
                    color: #faad14;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  > .wrapper {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
}
</style>
